<template>
	<view>
		<view v-if="!order" class="bkk">
			<view class="bc b20">
				<i class="ri-hand-heart-fill" style="color:#008040;font-size:30px;"></i>
				<!-- <i-icon size="30px" color="#008040" name="hand-heart-fill"></i-icon> -->
				废旧回收订单
			</view>
			<view class="">
				<view class="bl b10" v-for="(item,index) in orderList" @click="order=item;">
					<view class="">
						<view class="">{{item.recycleName}}</view>
						<view class="f12">{{item.createDatetime}}</view>
					</view>
					<view>{{item.status}}</view>
					<view class="red">￥{{item.amount}}</view>
				</view>
			</view>
			<view v-if="!orderList || orderList.length==0" class=""
				style="color:#8d8d8d;text-align: center;font-size:30rpx;">数据为空</view>
		</view>
		<view v-else class="p-win">
			<view class="bc b20">
				<i class="ri-hand-heart-fill" style="color:#008040;font-size:30px;"></i>
				<!-- <i-icon size="30px" color="#008040" name="hand-heart-fill"></i-icon> -->
				订单详情
			</view>
			<view><text class="p-t">流水号：</text>{{order.pono}}</view>
			<view><text class="p-t">回收项目：</text>{{order.recycleName}}</view>
			<view><text class="p-t">收款人：</text>{{order.payeeName}}</view>
			<view><text class="p-t">收款账号：</text>{{order.payeeAccount}}</view>
			<view><text class="p-t">单价：</text>{{order.price}}元/{{order.unit}}</view>
			<view><text class="p-t">数量：</text>{{order.quantity}}{{order.unit}}</view>
			<view><text class="p-t">交易金额：</text>{{order.amount}}元</view>
			<view><text class="p-t">交易时间：</text>{{order.createDatetime}}</view>
			<view><text class="p-t">状态：</text>{{order.status}}</view>
			<view><button @click="order=null;">关闭</button></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderList: [],
				pages: 0,
				total: 0,
				current: 1,
				size: 10,
				isAll: false,
				zbAccount: '',
				order: null
			}
		},
		methods: {
			/**
			 *  获取回收订单列表
			 * @param {Object} account
			 */
			getRecycleOrder(current, size) {
				if (this.isAll) {
					//已加载完全无需再次加载
					return;
				}
				let _this = this
				this.httpRequest({
					url: "/order/recycle/list?current=" + current + "&size=" + size +
						"&zbAccount=" + _this.zbAccount,
					method: 'GET',
					fn: (data) => {
						// console.info(data)
						if (data.records.length == 0) {
							_this.isAll = true;
							return
						}
						_this.orderList.push(...data.records)
						_this.pages = data.pages
						_this.total = data.total
						_this.current = parseInt(data.current)
						_this.size = parseInt(data.size)
					},
					fail: (e) => {
						console.warn(e)
					}
				})
			},
			/**
			 * 获取用户账户信息
			 */
			getUserAccount(userId) {
				let _this = this;
				this.httpRequest({
					url: "/gr/find/one",
					method: 'POST',
					fn(data) {
						//获取账户信息
						// console.log(data)
						_this.zbAccount = data[0].virtualAccNo || ""
						_this.accountName = data[0].accName
						_this.getRecycleOrder(_this.current, _this.size)
					}
				})
			}
		},
		onReachBottom() {
			if (this.order) {
				//当显示详情页的时候，停止追加
				return;
			}
			//当划到底部的时候，追加订单列表
			this.getRecycleOrder(this.current + 1, this.size);
		},
		onLoad(p) {
			//获取账户信息
			this.getUserAccount()
		}
	}
</script>

<style>
	.p-li {
		display: block;
		border-top: 1px solid #C0C0C0;
		border-bottom: 1px solid #C0C0C0;
		margin: 10px 0px;
	}

	.p-t {
		display: inline-block;
		width: 100px;
		text-align: end;
		line-height: 30px;
		font-size: 14px;
	}
</style>
